<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>d</title>
	<link rel="stylesheet" href="source/plugin/annual/template/css/reset.css">
	<style>
		.w{
			width: 88.4%;
			margin: 0 auto;
		}
		html,body{
			width: 100%;
			height: 100%;
			background: linear-gradient(#3684e3 ,#1bc4d3);
			background-repeat: no-repeat;
		}
		.header{
			height: 10%;
			background:url(img/hico10.png) center center/100% 50% no-repeat;
			overflow: hidden;
		}
		.text-1{
			height: 3%;
			color: #fff;
			text-align: right;
			overflow: hidden;
		}
		.scrollwrap{
			height: 60%;
			overflow: hidden;
		}
		.list{
			height: 100%;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			transition: 0.6s;
		}
		.list .pageone{
			flex: 0 0 100%;
		}
		.list .pageone div{
			width: 9.4%;
			height: 18%;
/*			width: 134px;
			height: 134px;
			*/			margin: 0.3%;
			float: left;
			background:url(img/hico5.png) center center no-repeat;
			background:url(img/hico5.png) center center/100% 100% no-repeat;
			transition: 1s;
		}
		.list .pageone div.active{
			background-image:url(img/hico6.png);
		}
		.footer{
			margin-top: 3%;
			height: 9.6%;
			background:  url(img/hico11.png) center center/100% 100% no-repeat;
		}
		.footer .label{
			left: 20%;
			top: 0;
			bottom: 0;
			color: #fff;
		}
		.layout-qrcode{
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			background: rgba(0,0,0,0.8);
			display: none;
		}
		.layout-qrcode .close{
			right: 7%;
			top: 7%;
			width: 7%;
			height: 7%;
			cursor: pointer;
			background:url(img/hico12.png) center center/100% 100% no-repeat;
		}
		.layout-qrcode .qr{
			left: 50%;
			top: 50%;
			width: 30%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		.open-qr{
			right: 0;
			top: 0;
			bottom: 0;
			width: 8.5%;
			cursor: pointer;
		}

		.rand{
			bottom: 0;
			top: 0;
			left: 71%;
			width: 11.2%;
			cursor: pointer;
		}
		.stop{
			background:url(img/hico14.png) center center /100% 100% no-repeat;
		}
		.header-pic{
			left: 11%;
			width: 6.3%;
			top: 11%;
			bottom: 11%;
			background: url(img/hico5.png) center center/100% 100% no-repeat;
			border-radius: 50%;
		}
		.links{
			top: 13%;
			bottom: 21%;
			right: 0;
			width: 16%;
		}
	</style>
</head>
<body>
	<div class="header w por">
		<div class="open-qr poa"></div>
	</div>
	<div class="text-1 w">
		234人签到
	</div>
	<div class="scrollwrap w">
		<div class="list">
			<div class="pageone">
				<div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div>
			</div>
			<div class="pageone">
				<div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div><div content="bbx"></div>
			</div>
		</div>
	</div>
	<div class="footer w por">
		<div class="header-pic poa"></div>
		<div class="label poa">小七: 180****5266</div>
		<div class="rand poa"></div>
		<a href="#" class="links poa"></a>
	</div>

	<div class="layout-qrcode pof">
		<div class="close poa"></div>
		<img src="img/hico13.png" alt="" class="qr poa">
	</div>
	<script src="js/jquery-3.1.0.min.js"></script>
	<script>

		function rand(max,min){
			if(min){
				return Math.round(Math.random()*(max-min))+min;
			}else{
				return Math.round(Math.random()*max);	
			}	
		}
		function rand_ani() {
			$('.label').text(dom.removeClass('active').eq(rand(length)).addClass('active').attr('content'));
			$('.header-pic').css('background-image', dom.siblings('active').css('background-image'));
		}
		function order(index) {
			var index = $('.list .pageone').eq(page).children('div.active').index();
			time = setInterval(function(){
				if(index>=length){
					index =0;
					if (page>=$('.list .pageone').length-1) {
						page = 0;
					}else{
						page ++;
					}
					dom = $('.list .pageone').eq(page).children('div');
					$('.list').css({
						'-webkit-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
						'-moz-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
						'-ms-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
						'-o-transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
						'transform': 'translate3d('+'-'+$('.list').width()*page+'px, 0px, 0px)',
					});
				}else{
					index++;
				}
				$('.label').text(dom.attr('content'));
				$('.header-pic').css('background-image', dom.siblings('active').css('background-image'));
				dom.eq(index).addClass('active').siblings().removeClass('active');
			},ani_time)
		}

		function auto(){
			var height = window.innerHeight/100*3;
			$('.header').css({
				'padding-top':height,
				'padding-bottom':height
			});
			$('.footer').css({
				'margin-top':height,
			});
			$('.text-1').css({
				'font-size':$('.text-1').height()*0.8,
			});
			$('.open-qr').css({
				'top':height,
				'bottom':height,
			});

			$('.footer .label').css({
				'font-size':$('.footer .label').height()*0.3,
				'line-height':$('.footer .label').height()+'px',
			});
		}
		auto()
		$(window).resize(auto);
		$('.layout-qrcode .close').click(function() {
			$(this).parent().fadeToggle();
		});
		$('.open-qr').click(function() {
			$('.layout-qrcode').fadeToggle();
		});

		var page = 0;
		var dom = $('.list .pageone').eq(page).children('div');
		var length = dom.length-1;
		var time = '';
		var ani_time = 1000;
		$('.rand').data('click-order', 1);
		$('.rand').on('click', function() {
			$(this).trigger('click'+$('.rand').data('click-order'));
			$('.rand').data('click-order',$('.rand').data('click-order')+1);
		});
		$('.rand').on('click1', function() {
			// alert($(this).data('click-order'));
			rand_ani();
			time = setInterval(rand_ani,ani_time)
		});
		$('.rand').on('click2', function() {
			// alert($(this).data('click-order'));
			$(this).addClass('stop');
			clearInterval(time);
			
			order();
		});
		$('.rand').on('click3', function() {
			// alert($(this).data('click-order'));
			$(this).removeClass('stop');
			$(this).data('click-order',0);
			clearInterval(time);
		});

	</script>
</body>
</html>

